<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
		<style>
			html,
        body,
        #container {
            width: 100%;
            height: 100%;
            background: #191D29;
        }
    </style>
		<title>电子围栏</title>
		<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
		<link rel="stylesheet" href="css/style.css">
		<script src="https://webapi.amap.com/maps?v=1.4.15&key=8cdee54edeab1a899e1c424ee6bafd03&plugin=AMap.PolyEditor,AMap.DistrictSearch"></script>
		<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
	</head>

	<body>
		<header class="kjhnmdeedf pd row">
			<div class="col fanhuider">
				<img src="img/left.png" class="cz jhherertyt">
				<span class="ml5 cf fz16 ">电子围栏</span>
			</div>
			<div class="cf fz14 inits wanchhdeetr yuijhbbseert">
				预警记录
			</div>
			<div class="cf fz14 bianji wanchhdeetr">
				完成
			</div>
		</header>

		<div id="container"></div>
		<!--
    <div class="input-card" style="width: 120px">
        <button class="btn" onclick="jjhnsnd()" style="margin-bottom: 5px">开始编辑</button>
        <button class="btn" onclick="jjhnsnder()">结束编辑</button>
    </div>
-->


		<div class="pd jjnxeert">
			<p class="cf fz16">
				鲁A·66666
			</p>
			<div class="row">
				<div class="col">

					<p class="cf fz14 mt5 inits">
						山东省济南市围栏
					</p>
					<input type="text" class="jhnceertt mt5 bianji" value="山东省济南市围栏">

					<p class="z9 mt5">
						经度：116.397128 <span class="ml10"> 纬度：39.916527</span>
					</p>
				</div>
				<div class="dfrtytre inits">
					<img src="img/dingwei.png" class="dingweert cz aa act">
					<img src="img/loading.gif" class="dingweert ab cz">
				</div>
			</div>
			<div class="jjhnmcert mt10 pd row inits">
				<div class="col">
					<span class="fz16 z3">电子围栏</span>
					<span class="z6 fz14 ml10">·已设定</span>
				</div>
				<div>
					<div class="kjjnjjhder cz pr">

					</div>
				</div>
			</div>
			<div class="mt10 fdgtseert cen z3 fz16 inits">
				编辑围栏
			</div>

			<div class="bianji row jhneer mt10">
				<div class="col mr10">
					<div class="kjmxeeertt cf fz15 cen" data-type="1">
						按行政区域划分
					</div>
				</div>
				<div class="col ml10">
					<div class="kjmxeeertt cf fz15 cen" data-type="2">
						新建多边形
					</div>
				</div>
			</div>
		</div>



		<div class="input-card">
			<div class="input-item">
				<div class="input-item-prepend"><span class="input-item-text">省</span></div>
				<select id='province' style="width:100px" onchange='search(this)'></select>
			</div>
			<div class="input-item">
				<div class="input-item-prepend"><span class="input-item-text">市</span></div>
				<select id='city' style="width:100px" onchange='search(this)'></select>
			</div>
			<div class="input-item">
				<div class="input-item-prepend"><span class="input-item-text">区/县</span></div>
				<select id='district' style="width:100px" onchange='search(this)'></select>
			</div>
			<div class="row fz16 cen">
				<div class="col fdgdfgya">
					取消
				</div>
				<div class="col ls fdgdfgyb">
					确定
				</div>
			</div>
		</div>


		<script src="js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		<script type="text/javascript">
			var polygons = [],
				citycode;
			var citySelect = document.getElementById('city');
			var districtSelect = document.getElementById('district');
			var map = new AMap.Map("container", {
				center: [113.933855, 22.540732],
				mapStyle: "amap://styles/darkblue",
				zoom: 12,
				draggable: false
			});
			var path = [
				[113.948274, 22.564908],
				[113.944326, 22.548976],
				[113.957287, 22.546994],
				[113.949476, 22.515521],
				[113.921839, 22.520437],
				[113.931795, 22.569426]
			]

			var polygon = new AMap.Polygon({
				path: path,
				strokeColor: "#1269A6",
				strokeWeight: 4,
				strokeOpacity: 1,
				fillOpacity: 0.4,
				fillColor: '#1269A6',
				zIndex: 50,
			})

			var viaMarker = new AMap.Marker({
				position: new AMap.LngLat(113.933855, 22.540732),
				// 将一张图片的地址设置为 icon
				size: new AMap.Size(10, 14),
				icon: './img/xce.png'
			});
			map.add([viaMarker]);
			map.add(polygon)
			// 缩放地图到合适的视野级别
			map.setFitView([polygon])
			var polyEditor = new AMap.PolyEditor(map, polygon)

			$(function() {
				var type = window.location.search.split("type=")[1] // 2.群电子围栏设置
				if (type == 1) {
					$(".yuijhbbseert,.jjhnmcert,.fdgtseert").hide()
				}
				if (type == 2) {
					$(".yuijhbbseert").text('设置').attr("data-type", type)
				}
				$(".kjmxeeertt").on("click", function() {
					var type = $(this).attr("data-type") // 1.按行政区域划分 2.新建多边形
					$(".kjmxeeertt").removeClass("act")
					$(this).addClass("act")
					jjhnsnder()
					$(".input-card").removeClass("act")
					if (type == 1) {
						$(".input-card").addClass("act")
					}
					if (type == 2) {
						jjhnsnd()
					}
				})

				//            取消按钮触发
				$(".fdgdfgya").on("click", function() {
					$(".input-card").removeClass("act")
					search('')
				})

				//            确定按钮触发
				$(".fdgdfgyb").on("click", function() {
					$(".input-card").removeClass("act")
				})
				$("body").show()
				$(".bianji").addClass("act")

				// 编辑围栏 按钮触发
				$(".fdgtseert").on("click", function() {
					$(".inits").addClass("act")
					$(".bianji").removeClass("act")
				})
				// 右上角完成按钮触发
				$(".wanchhdeetr").on("click", function() {
					$(".inits").removeClass("act")
					$(".bianji").addClass("act")
					jjhnsnder()
				})
				$(".yuijhbbseert").on("click", function() {
					var type = $(this).attr("data-type")
					var urls= '/pages/index/WarningRecord'
					if(type==2){ // 设置
						urls= '/pages/user/TransportManagement/ElectronicFenceSetting'
					}
					//预警记录
					uni.navigateTo({
						url: urls
					})
				})

				// 左上角的返回按钮触发
				$(".fanhuider").on("click", function() {
					uni.navigateBack({
						delta: 1
					});
				})

				// 定位按钮触发
				$(".dfrtytre").on("click", function() {
					$(".dingweert").removeClass("act")
					$(".dingweert.ab").addClass("act")
					AMap.plugin('AMap.Geolocation', function() {
						var geolocation = new AMap.Geolocation({
							enableHighAccuracy: true, //是否使用高精度定位，默认:true
							zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点

						});
						map.addControl(geolocation);
						geolocation.getCurrentPosition(function(status, result) {
							$(".dingweert").removeClass("act")
							$(".dingweert.aa").addClass("act")
						});
					});
				})
			})

			//行政区划查询
			var opts = {
				subdistrict: 1, //返回下一级行政区
				showbiz: false //最后一级返回街道信息
			};
			district = new AMap.DistrictSearch(opts); //注意：需要使用插件同步下发功能才能这样直接使用
			district.search('中国', function(status, result) {
				if (status == 'complete') {
					getData(result.districtList[0]);
				}
			});

			function getData(data, level) {
				var bounds = data.boundaries;
				if (bounds) {
					for (var i = 0, l = bounds.length; i < l; i++) {
						var polygon = new AMap.Polygon({
							map: map,
							strokeWeight: 1,
							strokeColor: '#0091ea',
							fillColor: '#80d8ff',
							fillOpacity: 0.2,
							path: bounds[i]
						});
						polygons.push(polygon);
					}
					map.setFitView(); //地图自适应
				}

				//清空下一级别的下拉列表
				if (level === 'province') {
					citySelect.innerHTML = '';
					districtSelect.innerHTML = '';
				} else if (level === 'city') {
					districtSelect.innerHTML = '';
				} else if (level === 'district') {}

				var subList = data.districtList;
				if (subList) {
					var contentSub = new Option('--请选择--');
					var curlevel = subList[0].level;
					var curList = document.querySelector('#' + curlevel);
					curList.add(contentSub);
					for (var i = 0, l = subList.length; i < l; i++) {
						var name = subList[i].name;
						var levelSub = subList[i].level;
						var cityCode = subList[i].citycode;
						contentSub = new Option(name);
						contentSub.setAttribute("value", levelSub);
						contentSub.center = subList[i].center;
						contentSub.adcode = subList[i].adcode;
						curList.add(contentSub);
					}
				}

			}

			function search(obj) {
				//清除地图上所有覆盖物
				for (var i = 0, l = polygons.length; i < l; i++) {
					polygons[i].setMap(null);
				}
				var option = obj[obj.options.selectedIndex];
				var keyword = option.text; //关键字
				var adcode = option.adcode;
				district.setLevel(option.value); //行政区级别
				district.setExtensions('all');
				//行政区查询
				//按照adcode进行查询可以保证数据返回的唯一性
				district.search(adcode, function(status, result) {
					if (status === 'complete') {
						getData(result.districtList[0], obj.id);
					}
				});
			}


			function jjhnsnd() {
				polyEditor.open()

				map.setStatus({
					dragEnable: false
				});
			}

			function jjhnsnder() {
				console.log(polygon.Ce.path);
				var jhhseer = []
				polygon.Ce.path.map(function(a) {
					var jhsdee = []
					jhsdee.push(a.lng)
					jhsdee.push(a.lat)
					jhhseer.push(jhsdee)
				})
				console.log(JSON.stringify(jhhseer));
				polyEditor.close()
				map.setStatus({
					dragEnable: true
				});
			}
		</script>
	</body>
</html>
